import React, { useState } from 'react';
import { Form, Input, Button, DatePicker, Card, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import moment from 'moment';
import './index.scss';
import { addTodoApi } from '../../api/list';
const Create = () => {
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
    const navigate = useNavigate();

    const onFinish = async (values) => {
        setLoading(true);
        
        // 格式化日期为 YYYY-MM-DD 格式
        const formattedValues = {
            ...values,
            startTime: moment(values.startTime).format('YYYY-MM-DD'),
            endTime: moment(values.endTime).format('YYYY-MM-DD')
        };
        await addTodoApi(formattedValues)
        navigate('/');
        message.success('添加成功');
        setLoading(false);
    };

    // 计算默认的保修到期时间（购买日期后一年）
    const handleStartTimeChange = (date) => {
        if (date) {
            const endTime = moment(date).add(1, 'year');
            form.setFieldsValue({ endTime });
        } else {
            form.setFieldsValue({ endTime: null });
        }
    };

    return (
        <div className="create-container">
            {/* 修改 Card 的 variant 属性 */}
            <Card title="新建保修记录" variant="bordered" className="create-card">
                <Form
                    form={form}
                    name="createWarranty"
                    onFinish={onFinish}
                    layout="vertical"
                    scrollToFirstError
                    size="large"
                >
                    <Form.Item
                        name="name"
                        label="产品名称"
                        rules={[
                            { required: true, message: '请输入产品名称' },
                            { max: 50, message: '名称不能超过50个字符' }
                        ]}
                    >
                        <Input placeholder="请输入产品名称" />
                    </Form.Item>

                    <Form.Item
                        name="startTime"
                        label="购买日期"
                        rules={[{ required: true, message: '请选择购买日期' }]}
                    >
                        <DatePicker 
                            style={{ width: '100%' }} 
                            placeholder="选择购买日期"
                            onChange={handleStartTimeChange}
                        />
                    </Form.Item>

                    <Form.Item
                        name="endTime"
                        label="保修到期时间"
                        rules={[{ required: true, message: '请选择保修到期时间' }]}
                    >
                        <DatePicker 
                            style={{ width: '100%' }} 
                            placeholder="选择保修到期时间"
                        />
                    </Form.Item>

                    <Form.Item>
                        <Button
                            type="primary"
                            htmlType="submit"
                            loading={loading}
                            size="large"
                        >
                            提交
                        </Button>
                        <Button
                            style={{ marginLeft: 16 }}
                            onClick={() => navigate('/')}
                            size="large"
                        >
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    );
};

export default Create;